<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keyword" content="">
    <!-- <link rel="shortcut icon" href="img/favicon.png"> -->
    <title>问题单反馈</title>
    <!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <form action="" class="page">
        <div class="weui-cells__title">反馈内容</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea name="content" id="" rows="4" class="weui-textarea" placeholder="请输入反馈内容" required></textarea>
                </div>
            </div>
        </div>
        <div class="weui-cells__title">实际完成时间</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input type="date" class="weui-input" id="completeTime" name="completeTime" value="2017-01-01">
                </div>
            </div>
        </div>
        <div class="weui-cells__title">附件上传</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div id="uploaderFiles" style="line-height: 2em;margin-bottom: 10px;">
                        <!-- <p><i class="weui-icon-cancel"></i> xxxxx.pdf</p> -->
                        <!-- <p><i class="weui-icon-cancel"></i> xxxxx.xlsx</p> -->
                        <!-- <p><i class="weui-icon-cancel"></i> xxxxx.doc</p> -->
                    </div>
                    <div class="weui-uploader__input-box">
                        <input id="uploaderInput" class="weui-uploader__input" type="file" multiple>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-btn-area">
            <button id="feedback" class="weui-btn weui-btn_primary">提交</button>
        </div>
    </form>
    <div class="weui-footer weui-footer_fixed-bottom">
        <p class="weui-footer__text">Copyright &copy; 2016-2017 宙能信息. All rights reserved.</p>
    </div>
    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">反馈成功</p>
        </div>
    </div>
    <!-- loading toast -->
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">反馈中&hellip;</p>
        </div>
    </div>
    <!-- <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script>
    (function($) {
        var tmpl = '<p><i class="weui-icon-cancel" data-name="${filename}"></i> ${filename}</p>',
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles"),
            $toast = $('#toast'),
            $loadingToast = $('#loadingToast'),
            blobFiles = {};

        // 选择文件
        $uploaderInput.on("change", function(e){
            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];

                if (blobFiles[file.name]) {
                    continue;
                }

                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }
                blobFiles[file.name] = src;

                $uploaderFiles.append($(tmpl.replace(/\$\{filename\}/g, file.name)));
            }
        });

        // 删除选中的文件
        $uploaderFiles.on('click', '.weui-icon-cancel', function () {
            var filename = $(this).data('name');
            delete blobFiles[filename];
            $(this).parent().remove();
        });

        // 表单提交
        $('form').on('submit', function (e) {
            e.preventDefault();
            var obj = {}; // 待提交的数据
            $.each($(this).serializeArray(), function (index, node) {
                obj[node.name] = node.value;
            });
            var attachment = [];
            $.each(blobFiles, function (key, blob) {
                attachment.push(blob);
            });
            obj.attachment = attachment.join(',');

            // ajax submit
            /*$.post('url', obj, function () {

            });*/
            if ($loadingToast.css('display') != 'none') return;

            $loadingToast.show();
            // ajax submit
            setTimeout(function () {
                $loadingToast.hide();
                if ($toast.css('display') != 'none') return;

                $toast.show();
                setTimeout(function () {
                    $toast.hide();
                    history.back();
                }, 1000);
            }, 2000);
        });
    })(Zepto);
    </script>
</body>

</html>
